<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            @keyup.enter.native="handleFilter"
            clearable
            v-model="listQuery.username"
            style="width: 150px;margin-right:15px;margin-top:7px"
            class="filter-item"
            placeholder="请输入员工姓名"
      ></el-input>
      <el-input
            @keyup.enter.native="handleFilter"
            clearable
            v-model="listQuery.workNum"
            style="width: 150px;margin-right:15px;margin-top:7px"
            class="filter-item"
            placeholder="请输入员工工号"
      ></el-input>
      <el-select clearable @keyup.enter.native="handleFilter" @focus="getRoleInfo" v-model="listQuery.roleId" style="width: 150px;margin-right:15px;" class="filter-item" placeholder="请输入角色类型" >
        <el-option :value="item.roleId" :label="item.roleName" v-for="(item,index) of this.roleList.data" :key="index"/>
      </el-select>
      <el-input clearable @keyup.enter.native="handleFilter" v-model="listQuery.phone" style="width: 150px;margin-right:15px;" class="filter-item" placeholder="请输入手机号码" >
      </el-input>
      <el-select clearable @keyup.enter.native="handleFilter" v-model="listQuery.departmentName" @focus="getDepartInfo" style="width: 150px;margin-right:15px;" class="filter-item" placeholder="请输入员工部门" >
        <el-option :value="item" :label="item" v-for="(item,index) in this.departList.data" :key="index"/>
      </el-select>

      <el-date-picker
        v-model="listQuery.startTime"
        value-format="timestamp"
        format="yyyy-MM-dd"
        placeholder="选择开始日期"
        style="width: 150px;margin-right:15px;" class="filter-item"
      >
      </el-date-picker>
      <el-date-picker
        v-model="listQuery.endTime"
        format="yyyy-MM-dd"
        value-format="timestamp"
        placeholder="选择结束日期"
          style="width: 150px;margin-right:15px;" class="filter-item"
      ></el-date-picker>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="dealList" v-loading="loading.list" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="员工姓名"  prop="userName"   align="center"/>
      <el-table-column  label="员工工号" prop='jobNumber' align="center" width="100px"/>
      <el-table-column  label="员工角色" prop='roleName' align="center"/>
      <el-table-column  label="员工短号" prop='shortNumber' align="center" width="100px"/>
      <el-table-column  label="手机号码" prop='phone' align="center" width="100px"/>
      <el-table-column  label="隶属部门"  prop="departmentName" align="center"/> 
      <el-table-column label="上级领导工号" prop="parentNumber" align="center" width="100px"/>
      <el-table-column label="入职时间" prop="entryTime" align="center"/>
      <el-table-column label="员工岗位职级" prop="jobClass" align="center"/>
      <el-table-column label="员工标识" prop="newEmployee" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.newEmployee" size="medium" effect="dark" type="success">新员工</el-tag>
          <el-tag v-else effect="dark" size="medium" type="info">老员工</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="员工状态" prop="status" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status" size="medium" effect="dark" type="success">启用</el-tag>
          <el-tag v-else effect="dark" size="medium" type="info">禁用</el-tag>
        </template>
      </el-table-column>
      <!-- 对员工数据进行编辑与删除操作 -->
      <el-table-column  label="操作"   align="center">
        <template slot-scope="scope" >
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[5,10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
 
  </div>
</template>


<script>
import { searchWorkers,deleteWorkers,modifyWorkers} from '@/api/chargingData'
import { validatePhone } from '@/utils/validate'
import { getRoleList, getDepartList } from '@/api/user'
import BackToTop from "@/components/BackToTop";
import VePie from "v-charts/lib/pie";
import { parseTime,parseTimeYYDD } from '@/utils'
export default {
  name: 'charging_data_list',
   components: {
    BackToTop,
    VePie,
  },
  data() {
    return {
      total: 100,
      // 搜索框信息
      listQuery: {
        offset: 1,
        limit: 10,
        startTime:'',
        endTime:'',
        workNum:'',
        roleId:'',
        username: '',
        departmentName:'',
        phone:''
      },
      roleList: {},
      departList: {},
      managerType: this.$store.state.user.userInfo.managerType,
      // 用户状态
       options1:[
        { 
        value:'1',
        label:'已绑定'
        },
        {
        value:'2',
        label:'未绑定'
        }
      ],
      // 搜索后接收的用户列表数据，此时为一个对象，需要进行转化
      list: null,
      // 将接收的用户列表数据进行筛选，只取其中的record数组数据，dealList为一个数组
      dealList: null,
      // 控制加载动画
      loading: {
        list: false,
        add: false
      },
        loading: {
        list: false,
        add: false
      },
      addQuery:{
        id:'',
        deviceId:'',
        title:'',
        authInfo:'',
      },
        dialog: {
        add: false,
        up:false
      },
      downloadLoading: false,
      updataLoading:false,
    }
  },
  methods: {
    // 搜索按钮绑定的函数，向服务器发送表单数据
    // 所有传输的表单字段都不是必须的，按需查询
    async handleFilter() {
      let query = {
        userName: this.listQuery.username,
        jobNumber: this.listQuery.workNum,
        departmentName: this.listQuery.departmentName,
        phone: this.listQuery.phone,
        roleId: this.listQuery.roleId,
        startTime: this.listQuery.startTime,
        endTime: this.listQuery.endTime,
        page: this.listQuery.offset,
        limit: this.listQuery.limit 
      }
      try{
        this.list = await searchWorkers(query)
        this.dealList = this.list.data.records
        this.total = this.list.data.total
      }catch(err){}
    },

    handleEdit(item) {
      console.log(item)
      this.$router.push({
        path: 'updateData_List',
        name: 'updateData_List',
        params: item
      })
    },
    // 删除用户按钮,使用elementui的messageBox弹框组件
    handleDelete(index,row) {
      this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
          let res = await deleteWorkers({jobNumber: row.jobNumber})
          this.dealList.splice(index, 1)
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info', 
            message: '已取消删除'
          })
        })
    },
     // 获取角色列表下拉框数据
    async getRoleInfo() {
      try {
        this.roleList = await getRoleList()
      } catch (err) {}
    },
    // 获取部门下拉框数据
    async getDepartInfo() {
     try {
        this.departList = await getDepartList()
      } catch (err) {}
    },
     handleSizeChange(val) {
      this.listQuery.limit = val
      this.handleFilter()
    },
     handleCurrentChange(val) {
      this.listQuery.offset = val
      this.handleFilter()
    }
  },
  mounted() {
      this.handleFilter();
    },
}
</script>
